---
title: Déployer votre site Astro sur AWS
description: Comment déployer votre site Astro sur le web en utilisant AWS.
sidebar:
  label: AWS
type: deploy
logo: aws
supports: ['ssr', 'static']
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[AWS](https://aws.amazon.com/) est une plateforme d'hébergement d'applications web complète qui peut être utilisée pour déployer un site Astro.

Pour déployer votre projet sur AWS, vous devez utiliser la [console AWS](https://aws.amazon.com/console/). (La plupart de ces actions peuvent également être effectuées à l'aide de la [CLI d'AWS](https://aws.amazon.com/cli/)). Ce guide vous conduira à travers les étapes du déploiement de votre site sur AWS en utilisant [AWS Amplify](https://aws.amazon.com/amplify/), [Hébergement de sites web statiques S3](https://aws.amazon.com/s3/), et [CloudFront](https://aws.amazon.com/cloudfront/).

## AWS Amplify

AWS Amplify est un ensemble d'outils et de fonctionnalités spécialement conçus pour permettre aux développeurs front-end web et mobiles de créer rapidement et facilement des applications full-stack sur AWS. Vous pouvez déployer votre projet Astro sous forme de site statique ou de site rendu par un serveur.

### Site statique

Votre projet Astro est un site statique par défaut.

<Steps>
1. Créez un nouveau projet Amplify Hosting.

2. Connectez votre dépôt à Amplify.

3. Modifiez vos paramètres de compilation pour qu'ils correspondent au processus de compilation de votre projet.

    <PackageManagerTabs>
    <Fragment slot="pnpm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm i -g pnpm
            - pnpm config set store-dir .pnpm-store
            - pnpm i
        build:
          commands:
            - pnpm run build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - .pnpm-store/**/*
    ```
    </Fragment>
    <Fragment slot="npm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn build
      artifacts:
        baseDirectory: /dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    ```
    </Fragment>
    </PackageManagerTabs>
</Steps>

Amplify déploiera automatiquement votre site web et le mettra à jour lorsque vous pousserez un commit vers votre dépôt.

### Adaptateur pour le rendu à la demande

Afin de déployer votre projet en tant que site rendu par le serveur, vous devrez utiliser l'[adaptateur AWS Amplify maintenu par la communauté](https://github.com/alexnguyennz/astro-aws-amplify) et apporter quelques modifications à votre configuration.

Tout d’abord, installez l’adaptateur Amplify.

<PackageManagerTabs>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro-aws-amplify
  ```
  </Fragment>
  <Fragment slot="npm">
  ```shell
  npm install astro-aws-amplify
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro-aws-amplify
  ```
  </Fragment>
</PackageManagerTabs>

Ensuite, dans votre fichier `astro.config.*`, ajoutez l'adaptateur et définissez la sortie sur `server`.

```js title="astro.config.mjs" ins={2, 6, 7}
import { defineConfig } from 'astro/config';
import awsAmplify from 'astro-aws-amplify';

export default defineConfig({
  // ...
  output: "server",
  adapter: awsAmplify(),
});
```

Une fois l'adaptateur installé, vous pouvez configurer votre projet Amplify.

<Steps>
1. Créez un nouveau projet Amplify Hosting.

2. Connectez votre dépôt à Amplify.

3. Modifiez vos paramètres de compilation pour qu'ils correspondent au processus de compilation de l'adaptateur en modifiant les paramètres de compilation dans la console AWS ou en ajoutant un fichier `amplify.yaml` à la racine de votre projet.

    <PackageManagerTabs>
    <Fragment slot="pnpm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm i -g pnpm
            - pnpm config set store-dir .pnpm-store
            - pnpm i
        build:
          commands:
            - pnpm run build
            - mv node_modules ./.amplify-hosting/compute/default
      artifacts:
        baseDirectory: .amplify-hosting
        files:
          - '**/*'
      cache:
        paths:
          - .pnpm-store/**/*
    ```
    </Fragment>
    <Fragment slot="npm">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - npm ci --cache .npm --prefer-offline
        build:
          commands:
            - npm run build
            - mv node_modules ./.amplify-hosting/compute/default
      artifacts:
        baseDirectory: .amplify-hosting
        files:
          - '**/*'
      cache:
        paths:
          - .npm/**/*
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```yaml
    version: 1
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn build
            - mv node_modules ./.amplify-hosting/compute/default
      artifacts:
        baseDirectory: .amplify-hosting
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    ```
    </Fragment>
    </PackageManagerTabs>
</Steps>

Amplify déploiera automatiquement votre site web et le mettra à jour lorsque vous pousserez un commit vers votre dépôt.

<ReadMore>
  Consultez [le guide de déploiement Astro d'AWS](https://docs.aws.amazon.com/fr_fr/amplify/latest/userguide/get-started-astro.html) pour plus d'informations.
</ReadMore>

## Hébergement de sites web statiques sur S3

S3 est le point de départ de toute application. C'est là que sont stockés les fichiers de votre projet et d'autres ressources. S3 facture le stockage des fichiers et le nombre de requêtes. Vous trouverez plus d'informations sur S3 dans la [documentation d'AWS](https://aws.amazon.com/s3/).

<Steps>
1. Créez un panier S3 avec le nom de votre projet.

    :::tip
    Le nom du bucket doit être globalement unique. Nous recommandons une combinaison du nom de votre projet et du nom de domaine de votre site.
    :::

2. Désactivez **« Block all public access »**. Par défaut, AWS définit tous les buckets comme étant privés. Pour le rendre public, vous devez décocher la case « Bloquer l'accès public » dans les propriétés du bucket.

3. Téléchargez vos fichiers compilés situés dans `dist` sur S3. Vous pouvez le faire manuellement dans la console ou utiliser la CLI d'AWS. Si vous utilisez la CLI d'AWS, vous pouvez utiliser la commande suivante après [l'authentification avec vos identifiants AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) :

    ```
    aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
    ```

4. Mettez à jour la politique de votre bucket afin d'autoriser l'accès public. Vous trouverez ce paramètre dans **Permissions > Bucket policy**.

   ```json
   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Sid": "PublicReadGetObject",
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
       }
     ]
   }
   ```

    :::caution
    N'oubliez pas de remplacer `<BUCKET_NAME>` par le nom de votre bucket.
    :::

5. Activez l'hébergement de site web pour votre bucket. Vous pouvez trouver ce paramètre dans les **Properties > Static website hosting** du bucket. Définissez votre document d'index à `index.html` et votre document d'erreur à `404.html`. Enfin, vous pouvez trouver l'URL de votre nouveau site web dans **Properties > Static website hosting** du bucket.

    :::note
    Si vous déployez une application à page unique (SPA), définissez votre document d'erreur à `index.html`.
    :::
</Steps>

## S3 avec CloudFront

CloudFront est un service web qui offre des capacités de réseau de diffusion de contenu (CDN). Il est utilisé pour mettre en cache le contenu d'un serveur web et le distribuer aux utilisateurs finaux. CloudFront facture la quantité de données transférées. L'ajout de CloudFront à votre bucket S3 est plus rentable et permet une diffusion plus rapide.

Pour connecter S3 à CloudFront, créez une distribution CloudFront avec les valeurs suivantes :
  - **Domaine d'origine :** Point d'arrivée de votre site web statique dans le bucket S3. Vous pouvez trouver votre point de terminaison dans les **Propriétés > Hébergement de site web statique** de votre bucket S3. Vous pouvez également sélectionner votre bucket S3 et cliquer sur l'appel pour remplacer l'adresse de votre bucket par le point de terminaison statique de votre bucket.
  - **Politique de protocole de visualisation :** « Redirection vers HTTPS »

Cette configuration servira votre site en utilisant le réseau CDN Cloudfront. Vous pouvez trouver l'URL de votre distribution CloudFront dans les **Distributions > Nom de domaine** du bucket.

:::note
Lorsque vous connectez CloudFront à un point de terminaison de site web statique S3, vous vous appuyez sur les stratégies du Bucket S3 pour le contrôle d'accès. Voir la section [Hébergement de sites web statiques sur S3](/fr/guides/deploy/aws/#hébergement-de-sites-web-statiques-sur-s3) pour plus d'informations sur les stratégies du Bucket.
:::

## Déploiement continu avec GitHub Actions

Il existe de nombreuses façons de mettre en place un déploiement continu pour AWS. Une possibilité pour le code hébergé sur GitHub est d'utiliser [GitHub Actions](https://github.com/features/actions) pour déployer votre site web à chaque fois que vous poussez un commit.

<Steps>
1. Créez une nouvelle stratégie dans votre compte AWS en utilisant [IAM](https://aws.amazon.com/iam/) avec les permissions suivantes. Cette stratégie vous permettra de télécharger des fichiers compilés dans votre bucket S3 et d'invalider les fichiers de distribution CloudFront lorsque vous poussez un commit.
  
     ```json
     {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "VisualEditor0",
               "Effect": "Allow",
               "Action": [
                   "s3:PutObject",
                   "s3:ListBucket",
                   "s3:DeleteObject",
                   "cloudfront:CreateInvalidation"
               ],
               "Resource": [
                   "<DISTRIBUTION_ARN>",
                   "arn:aws:s3:::<BUCKET_NAME>/*",
                   "arn:aws:s3:::<BUCKET_NAME>"
               ]
           }
       ]
     }
     ```

    :::caution
    N'oubliez pas de remplacer `<DISTRIBUTION_ARN>` et `<BUCKET_NAME>`. Vous pouvez trouver le DISTRIBUTION_ARN dans **CloudFront > Distributions > Details**.
    :::

2. Créez un nouvel utilisateur IAM et attachez la règle à l'utilisateur. Cela fournira votre `AWS_SECRET_ACCESS_KEY` et `AWS_ACCESS_KEY_ID`.

3. Ajoutez cet exemple de flux de travail à votre dépôt à l'adresse suivante `.github/workflows/deploy.yml` et pousser-le sur GitHub. Vous devrez ajouter `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `BUCKET_ID`, et `DISTRIBUTION_ID` en tant que « secrets » dans votre dépôt sur GitHub dans **Settings** > **Secrets** > **Actions**. Cliquez sur <kbd>New repository secret</kbd> pour ajouter chacun d'entre eux.

     ```yaml
     name: Déployer le site web
    
     on:
       push:
         branches:
           - main
    
     jobs:
       deploy:
         runs-on: ubuntu-latest
         steps:
           - name: Checkout
             uses: actions/checkout@v4
           - name: Configurer les informations d'identification AWS
             uses: aws-actions/configure-aws-credentials@v1
             with:
               aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
               aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
               aws-region: us-east-1
           - name: Installation des modules
             run: npm ci
           - name: Compilation de l'application
             run: npm run build
           - name: Déploiement sur S3
             run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
           - name: Création d'une invalidation CloudFront
             run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"
    ```

    :::note
    Votre `BUCKET_ID` est le nom de votre bucket S3. Votre `DISTRIBUTION_ID` est l'ID de votre distribution CloudFront. Vous pouvez trouver votre ID de distribution CloudFront dans **CloudFront > Distributions > ID**
    :::
</Steps>

## Ressources communautaires

- [Déployer Astro sur AWS Amplify](https://www.launchfa.st/blog/deploy-astro-aws-amplify) (Anglais)
- [Déployer Astro sur AWS Elastic Beanstalk](https://www.launchfa.st/blog/deploy-astro-aws-elastic-beanstalk) (Anglais)
- [Déployer Astro sur Amazon ECS sur AWS Fargate](https://www.launchfa.st/blog/deploy-astro-aws-fargate) (Anglais)
- [Dépanner les déploiements SSR Amplify](https://docs.aws.amazon.com/fr_fr/amplify/latest/userguide/troubleshooting-ssr-deployment.html)
